<template>
  <el-dialog
    :title="locationParams.name + '的设备新增'"
    :visible.sync="visible"
    width="1000px"
    append-to-body
    :close-on-click-modal="false"
    :before-close="handleClose"
  >
    <el-row>
      <el-col :span="24">
        <lb-table
          :column="tableData.column"
          :data="tableData.data"
          pagination
          background
          layout="total, sizes, prev, pager, next, jumper"
          :page-sizes="[5, 10, 20, 30]"
          :pager-count="5"
          :current-page.sync="currentPage"
          :total="total"
          :page-size="pageSize"
          @size-change="handleSizeChange"
          @p-current-change="handleCurrentChange"
          class="addCourseTypeTable"
        >
          <!-- @selection-change="handleSelectionChange" -->
        </lb-table>
      </el-col>
    </el-row>
    <div slot="footer" class="dialog-footer">
      <!-- <el-button type="primary" @click="submit" size="small">确 定</el-button> -->
      <el-button @click="handleClose" size="small">关 闭</el-button>
    </div>
  </el-dialog>
</template>

<script>
import { list } from "@/api/iot/archives";
import { putEquipment } from "@/api/basicdata/location.js";
export default {
  components: {},
  dicts: ["device_type"],
  props: {
    visible: { type: Boolean, default: false },
    filtrateParams: { type: Object, default: {}, require: false },
    locationParams: { type: Object, default: {}, require: false },
  },
  data() {
    return {
      addSuccess: false,
      tableData: {
        column: [
          // {
          //   type: "selection",
          // },
          {
            prop: "name",
            label: "设备名称",
            showOverflowTooltip: true,
          },
          {
            prop: "code",
            label: "设备编号",
            showOverflowTooltip: true,
          },
          {
            prop: "type",
            label: "设备类型",
            align: "center",
            showOverflowTooltip: true,
            render: (h, scope) => {
              return (
                <div>
                  <dict-tag
                    options={this.dict.type.device_type}
                    value={scope.row.type}
                  />
                </div>
              );
            },
          },
          {
            prop: "cardNum",
            label: "物联网卡号",
            showOverflowTooltip: true,
          },
          {
            label: "操作",
            width: "320",
            fixed: "right",
            render: (h, scope) => {
              let that = this;
              let name = that.locationParams.name;
              let a;
              let inlineStyle = {
                display: "flex",
              };
              let waringStyle = {
                color: "#ed5565",
                fontSize: "12px",
              };
              let remindStyle = {
                color: "#E6A23C",
                fontSize: "12px",
              };
              let b = (
                <el-button
                  type="text"
                  size="small"
                  icon="el-icon-plus"
                  onClick={() => {
                    this.handleAddrow(scope.row);
                  }}
                >
                  绑定加入{name}
                </el-button>
              );
              let c;
              let architectureModelId = scope.row.architectureModelId;
              if (architectureModelId == null) {
                a = b;
                c = <div></div>;
              } else {
                if (architectureModelId == that.locationParams.id) {
                  a = <div style={waringStyle}>该设备已在{name}下</div>;
                  c = <div></div>;
                } else {
                  a = b;
                  c = <div style={remindStyle}>（该设备已在其他3D位置下）</div>;
                }
              }
              return (
                <div style={inlineStyle}>
                  {a}
                  {c}
                </div>
              );
            },
          },
        ],
        data: [],
      },
      currentPage: 1,
      pageSize: 10,
      total: 0,
    };
  },
  watch: {
    visible(value) {
      if (value) {
        this.initData();
      }
    },
  },
  created() {},
  methods: {
    handleSizeChange(val) {
      this.currentPage = 1;
      this.pageSize = val;
      this.initData();
    },
    handleCurrentChange(val) {
      this.currentPage = val;
      this.initData();
    },
    initData() {
      let that = this;
      let query = {
        ...this.filtrateParams,
      };
      query.pageNum = that.currentPage;
      query.pageSize = that.pageSize;
      // console.log(query, "addqqcs");
      list(query)
        .then((res) => {
          if (res.code === 700) {
            that.$message.warning(res.msg);
            return false;
          }
          // console.log(res, "addlist");
          that.tableData.data = res.rows;
          that.total = res.total;
        })
        .catch(() => {
          // this.$message.error("系统错误,请联系管理员!300021");
        });
    },
    submit() {
      this.handleClose();
    },
    handleAddrow(row) {
      let params = {
        architectureModelId: this.locationParams.id,
        id: row.id,
      };
      putEquipment(params)
        .then((res) => {
          if (res.code === 700) {
            that.$message.warning(res.msg);
            return false;
          }
          // console.log(res, "add");
          this.addSuccess = true;
          this.$message({
            message: "绑定成功",
            type: "success",
          });
          setTimeout(() => {
            this.initData();
          }, 100);
        })
        .catch(() => {
          // this.$message.error("系统错误,请联系管理员!200302");
        });
    },
    handleClose() {
      this.resetForm("form");
      this.$emit("popClose", this.addSuccess);
    },
  },
};
</script>

<style lang="scss" scoped>
</style>
